<template>
  <div>姓:<input v-model="firstName" /></div>
  <div>名:<input v-model="lastName" /></div>
  <div>{{userName}}</div>
  <div>性别{{formatterSex}}</div>
  <div>昵称:<input v-model="user.nickName" /></div>
</template>
<script setup>
import { ref, computed, watch, reactive, watchEffect } from 'vue'
let firstName = ref('');
let lastName = ref('');
let userName = computed(() => {
  return firstName.value + lastName.value;
})
// watch(firstName, (now, old) => {
//   console.log("------firstName------新值:" + now);
//   console.log("-------firstName-----旧值:" + old);
// }, {
//   immediate: true, //是否立即调用一次
// })
// watch(lastName, (now, old) => {
//   console.log("-------lastName-----新值:" + now);
//   console.log("-------lastName-----旧值:" + old);
// })
const user = reactive({ nickName: 'zhangsan' });
// watch(() => user.nickName, (now, old) => {
//   console.log("-------user-----新值:", now);
//   console.log("-------user-----旧值:", old);

// }, {
//   immediate: true, //是否立即调用一次
//   deep: true //是否开启深度监听
// })
watchEffect(() => {
  console.log("---------firstName:", firstName.value);
  console.log("---------nickName:", user.nickName);
})


</script>

<style scoped>
</style>
